import { useEffect, useMemo, useState } from 'react'
import { formatTime } from '@/util/util'
import { useParams } from 'react-router-dom'
import axios from '@/http'
import { TBlogDetail } from '@/type'
import BlogContent from './BlogData'
import './blogDetail.less'
const BlogDetail = () => {
  // 12
  const { id } = useParams<{ id: string }>()
  const [blogDetail, setBlogDetail] = useState<TBlogDetail>({
    title: '',
    collectNum: 0,
    goodNum: 0,
    content: '',
    way: '',
    id: '',
    time: '',
    seeNum: 0
  })
  useEffect(() => {
    axios
      .get('/blog/detail', {
        params: {
          id
        }
      })
      .then(res => {
        setBlogDetail(res.data)
      })
  }, [])
  const content = useMemo(() => blogDetail.content, [blogDetail])
  return (
    <div className="blogDetail">
      <div className="blogDetail-title">{blogDetail.title}</div>
      <div className="blogDetail-info">
        <span>ttzxh</span> | <span>{formatTime(blogDetail.time)}</span>
      </div>
      <div className="blogDetail-content">
        <BlogContent content={blogDetail.content}></BlogContent>
      </div>
      <div className="blogDetail-remark"></div>
      <div className="blogDetail-input"></div>
    </div>
  )
}
export default BlogDetail
